import * as iconExports from "@ant-design/icons";
import { AntdIconProps } from "@ant-design/icons/lib/components/AntdIcon";
import { Select, SelectProps } from "antd";
import { ComponentType, FC, useEffect, useState } from "react";

interface IconSelectProps extends SelectProps {}

const icons = Object.fromEntries(Object.entries(iconExports).filter(([key, value]) => typeof value === "object" && key !== "default"));

const IconSelect: FC<IconSelectProps> = ({ value, onChange, ...props }) => {
    const [innerValue, setInnerValue] = useState("");
    useEffect(() => {
        setInnerValue(value);
    }, [value]);
    return (
        <Select
            {...props}
            showSearch
            value={innerValue}
            onChange={(val, option) => {
                setInnerValue(val);
                onChange?.(val, option);
            }}
            options={Object.keys(icons).map(item => {
                const Icon = icons[item as keyof typeof icons] as ComponentType<AntdIconProps>;
                return {
                    label: (
                        <>
                            <Icon className="mr-2" />
                            {item}
                        </>
                    ),
                    value: item,
                };
            })}
        />
    );
};

export default IconSelect;
